<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/home.css" rel="stylesheet" />
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			
			mui.plusReady(function () {
			    var slider = mui('.mui-slider');
				slider.slider({interval:2000})
			})
		</script>
		
		<!-- 主体 -->
		<div class="mui-content">
			
			<div class="mui-slider my-photo">
				<div class="mui-slider-group mui-slider-loop">
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#"><img src="https://m.161006.online/static/my_image/4.jpg" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="https://m.161006.online/static/my_image/1.jpg" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="https://m.161006.online/static/my_image/2.jpg" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="https://m.161006.online/static/my_image/3.jpg" /></a>
					</div>
					<div class="mui-slider-item">
						<a href="#"><img src="https://m.161006.online/static/my_image/4.jpg" /></a>
					</div>
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#"><img src="https://m.161006.online/static/my_image/1.jpg" /></a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			<!-- 图片 -->
			<br />
			<button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="ref">刷新天气</button>
			<div class="mui-card" style="border-radius: 5px; margin: 20px;">
				<div class="mui-card-header">
					<div id="city">
						{{province}}·{{city}}
					</div>
					<br>
					<div id="time" style="font-size: 12px;" v-for="x in today_weather_list">
						<label v-if="x.week == 1">星期一</label>
						<label v-if="x.week == 2">星期二</label>
						<label v-if="x.week == 3">星期三</label>
						<label v-if="x.week == 4">星期四</label>
						<label v-if="x.week == 5">星期五</label>
						<label v-if="x.week == 6">星期六</label>
						<label v-if="x.week == 7">星期天</label>
						{{time.split(' ')[1]}}
					</div>
				</div>
				<div class="mui-card-content" v-for="x in today_weather_list">
					<div class="w_head">
						<div class="weather">
							今天 <label style="font-size: 26px;" id="today">{{x.dayweather}}</label>
						</div>
						<div class="temp">
							{{x.daytemp}} / {{x.nighttemp}}°
						</div>
					</div>
					<div class="w_bottom">
						<div class="wind_d">
							白天风向:{{x.daywind}}
						</div>
						<div class="wind_d_p">
							风力级别:{{x.daypower}}
						</div>
						<div class="wind_n">
							夜晚风向:{{x.nightwind}}
						</div>
						<div class="wind_n_p">
							风力级别:{{x.nightpower}}
						</div>
					</div>
					<div class="tes">
						不管什么天气，都希望你的心情像阳光一样好
					</div>
				</div>
				<div class="mui-card-footer" v-for="y in weather_list">
					<div class="mui-media-body">
						<div class="other">
							<div class="day">
								{{y.date.split('-')[1]}} {{y.date.split('-')[2]}}
							</div>
							<div class="week">
								<label v-if="y.week == 1">星期一</label>
								<label v-if="y.week == 2">星期二</label>
								<label v-if="y.week == 3">星期三</label>
								<label v-if="y.week == 4">星期四</label>
								<label v-if="y.week == 5">星期五</label>
								<label v-if="y.week == 6">星期六</label>
								<label v-if="y.week == 7">星期天</label>
							</div>
							<div class="img">
								{{y.dayweather}}
								<img src="" >
							</div>
							<div class="temp">
								{{y.daytemp}}&nbsp;&nbsp;&nbsp;&nbsp;{{y.nighttemp}}
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
		
		
		<script type="text/javascript">
			
			app = new Vue({
			     el:'.mui-card',
			     data:{
			        weather_list: '',
					today_weather_list: '',
					time: '',
					city: '',
					province: '',
			     },
			});
			
			
			
			
			mui.plusReady(function () {
				
				function start(){
					mui.alert('运行')
					plus.geolocation.getCurrentPosition(MapPoint, function(e) {
					mui.toast('error:' + e.message);
					})
					
					function MapPoint(position){
					var Lon = position.coords.longitude; //获取经度
					var Lat = position.coords.latitude; //获取纬度
					var dis = position.address.district
					var city = position.address.city
					var street = position.address.street
					var city = '[' + '"' + String(street)+ '"' + ',' + '"' +String(dis) + '"' + ',' + '"' + String(city) + '"' + ']'
					mui.alert(city)
					show_weather(city)
					// document.getElementsByClassName('mui-card-header')[0].innerHTML = address
					};
				}
				
				// 天气函数
				function show_weather(city){
					mui.alert('请求天气')
					mui.toast('正在刷新天气')
					mui.ajax(localStorage.getItem('request_url')+ "cost/show_weather/", {
					    data:"city=" + city,
					    dataType:'json',
					    type:'POST',  
					    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
					    timeout:5000,  
					    success:function show(e){
							mui.alert('获得我的')
							if(e.code == 200){
								mui.alert('请求高德')
								setTimeout(function(){
									mui.ajax('https://restapi.amap.com/v3/weather/weatherInfo?city='+ e.msg +'&key=6a1c5167265a469f1f5b56f85bf176da&extensions=all', {
									    data:"token=" + localStorage.getItem('uid'),
									    dataType:'json',  
									    type:'GET',  
									    contentType:"application/x-www-form-urlencoded; charset=utf-8",  
									    timeout:5000,
									    success:function show(e){
											app.weather_list = e.forecasts[0].casts.slice(1,)
											app.today_weather_list = e.forecasts[0].casts.slice(0,1)
											app.time = e.forecasts[0].reporttime
											app.city = e.forecasts[0].city
											app.province = e.forecasts[0].province
											mui.toast('刷新天气完成')
											setTimeout(function(){
												mui.alert('获取到天气')
												var te = {
													'暴雨':'baoyu.png',
													'大暴雨':'dabaoyu.png',
													'大风':'dafeng.png',
													'大雪':'daxue.png',
													'大雨':'dayu.png',
													'多云':'duoyun.png',
													'风':'feng.png',
													'雷阵雨':'leizhenyu.png',
													'霾':'mai.png',
													'中度霾':'mai.png',
													'重度霾':'mai.png',
													'严重霾':'mai.png',
													'晴':'qing.png',
													'特大暴雨':'tedabaoyu.png',
													'雾':'wu.png',
													'轻雾':'wu.png',
													'大雾':'wu.png',
													'浓雾':'wu.png',
													'特强浓雾':'wu.png',
													'小雪':'xiaoxue.png',
													'小雨':'xiaoyu.png',
													'阴':'yin.png',
													'雨夹雪':'yujiaxue.png',
													'阵雨':'zhenyu.png',
													'中雪':'zhongxue.png',
													'中雨':'zhongyu.png'
													}
												for(var i=0; i<document.getElementsByClassName('img').length; i++){
													// mui.alert(document.getElementsByClassName('img')[i].innerText.length)
													var wea = document.getElementsByClassName('img')[i].innerText.trim()
													document.getElementsByClassName('img')[i].firstElementChild.src = './weather_img/' + te[wea]
													
												}
											},200)
										},  
									    error:function(xhr,type,errorThrown){
											mui.toast('网络拥堵...稍后重试');
									    }  
									});
								},200)
							}else{
								mui.toast(e.msg)
							}
						},  
					    error:function(xhr,type,errorThrown){
							mui.toast('网络拥堵...稍后重试');
							// mui.alert(xhr.responseText)
					    }  
					});
				};
				
				document.getElementById('ref').addEventListener('tap',function(){
					mui.alert('点击')
					start()
				});
				
				start()
			})
			
		</script>
	</body>

</html>
